{% extends "base.html" %}

{% block content %}
<br>

<div class="bs-docs-section">
    <div class="page-header">
        <div class="row">
            <div class="col-lg-12">
                <h1 id="buttons">Datatables</h1>
            </div>
        </div>
    </div>

    <br>

    <div class="row">
        <div class="bs-component col-12">
            <h3>基础表格，所有数据全部在html中，没有ajax参与</h3>
            <table class="table table-hover" id="example1">
                <thead>
                    <tr>
                        {% for head in thead %}
                            <th scope="col">{{ head }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for i in range(100) %}
                        <tr>
                        {% for j in range(thead|length) %}
                            <td>{{ i|string + "-" + j|string  }}</td>
                        {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="bs-component col-12">
            <h3>Ajax表格，所有数据全部通过ajax导入</h3>
            <table class="table table-hover" id="example2">
                <thead>
                    <tr>
                        {% for head in thead %}
                            <th scope="col">{{ head }}</th>
                        {% endfor %}
                        <th scope="col">More</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="bs-component col-12">
            <h3>实现方法</h3>
            <a href="{{ url_for('markdown', filename='Ajax数据表.html') }}">Markdown</a>
        </div>
    </div>

</div>
{% endblock %}


{% block script %}

<script type="text/javascript">
// 基础
$( "#example1" ).DataTable();

// 在下边的函数中，修改想要的下拉菜单的样式
 /* Formatting function for row details - modify as you need */
 function format ( d ) {
     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        "<tr><td>这一行数据的id是</td><td>" + d.id + "</td></tr>"+
    "</table>"
 }


// ajax
function init_table( id ) {
    var dt = $( "#" + id ).DataTable(
        {
            processing: true,
            serverSide: true,
            // "searching": false,
            procession: false,
            pagingType: "full_numbers",
            ajax: {
                url: '{{ url_for("api.ajax") }}',
                data: function (data) {  // 去除无用的参数，减少ajax时，url的长度，
                        for (var i = 0, len = data.columns.length; i < len; i++) {
                        if (! data.columns[i].search.value) delete data.columns[i].search;
                        if (data.columns[i].searchable === false) delete data.columns[i].searchable;
                        if (data.columns[i].orderable === false) delete data.columns[i].orderable;
                        if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
                        }
                        delete data.search.regex;
                    }
            },
            columns: [ 
                { data: "chrom", searchable: true },       // api返回的是字典格式，因此通过字典的名称确定每一列到底是什么样的数据
                { data: "start", searchable: false },
                { data: "end", searchable: false },
                { data: "enhancerID", searchable: false },
                { data: "tissue", searchable: true },
                {                                           // 最后一列，新建一列
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": '',
                    "searchable": false
                }
            ], 
            // 构成表之前，更高表的属性，比如这里，将每一个元素居中
            "createdRow": function (row, data, rowIndex) {
                // Per-cell function to do whatever needed with cells
                $.each($('td', row), function (colIndex) {
                    // For example, adding data-* attributes to the cell
                    $(this).attr('style', "text-align:center");
                });
            } 
        } 
    );

     // Array to track the ids of the details displayed rows
     var detailRows = [];
 
    $('#' + id + ' tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'shown' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'shown' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
}


init_table("example2")
</script>

{% endblock %}